<template>
  <div id="detail">
  <detail-nav-bar class="detail-nav" @titleClick="titleClick" ref="nav"/>
  <scroll class="content"
     ref="scroll"
     :probe-type="3"
     @scroll="contentScroll"
  >
    <!-- 属性： topImages  传入值：top-images  -->
    <detail-swiper :topImages="topImages"></detail-swiper>
    <detail-base-info :goods="goods"/>
    <detail-shop-info :shop="shop"/>
    <detail-goods-info :detail-info="detailInfo" @imageLoad="imageLoad"/>
    <detail-param-info ref="params" :param-info="paramInfo"/>
    <detail-comment-info ref="comment" :comment-info="commentInfo"/>
    <goods-list ref="recommend" :goods="recommends"/>
   </scroll>
   <detail-bottom-bar class="bottom-bar" @addCart="addToCart"/>
   <back-top @click ="backClick" v-show="isShowBackTop"/>
  </div>
</template>

<script>
import DetailNavBar from './childComponents/DetailNavBar.vue'
import DetailSwiper from './childComponents/DetailSwiper.vue'
import DetailBaseInfo from './childComponents/DetailBaseInfo.vue'
import DetailShopInfo from './childComponents/DetailShopInfo.vue'


import {getDetail,Goods,Shop,GoodsParam,getRecommend} from "network/detail"
import DetailGoodsInfo from './childComponents/DetailGoodsInfo.vue'
import DetailParamInfo from './childComponents/DetailParamInfo.vue'
import Scroll from '@/components/common/scroll/Scroll.vue'
import DetailCommentInfo from './childComponents/DetailCommentInfo.vue'
import GoodsList from '@/components/content/goods/GoodsList.vue'
import DetailBottomBar from './childComponents/DetailBottomBar.vue'
import BackTop from '@/components/content/backTop/BackTop.vue'




export default {

  name:"Detail",
  components:{
    DetailNavBar,
    DetailSwiper,
    DetailBaseInfo,
    DetailShopInfo,
    DetailGoodsInfo,
    DetailParamInfo,
    DetailCommentInfo,

    Scroll,
    GoodsList,
    DetailBottomBar,
    BackTop,
  },
  data(){
   return{
     iid:null,
     topImages:[],
     goods:{},
     shop:{},
     detailInfo:{},
     parameInfo:{},
     commentInfo:{},
     recommends:[],
     themeTopYs:[],
     currentIndex:0,
     isShowBackTop:false,

   }
  },
  created(){
    // 保存传入的iid
    this.iid =this.$route.params.iid

    //根据iid请求详情数据
    getDetail(this.iid).then(res =>{
      console.log(res);
    //获取顶部的图片轮播数据
    console.log(res);
    const data=res.result
    this.topImages=res.result.itemInfo.topImages

    //获取商品信息
    this.goods=new Goods(res.result.itemInfo,res.result.columns,res.result.shopInfo.services)

    //创建店铺信息对象
    this.shop=new Shop(data.shopInfo)

    //保存商品的详情数据
    this.detailInfo = data.detailInfo;

    //获取参数信息
    this.paramInfo = new GoodsParam(data.itemParams.info,data.itemParams.rule)

    //取出评论信息
    if(data.rate.cRate !== 0){
      this.commentInfo = data.rate.list[0]
    }
    })

    //请求推荐数据
    getRecommend().then(res =>{
      console.log(res);
      this.recommends = res.data.list
    })
  },

  mounted(){

  },

  methods:{
    //获取各个主体距离顶部的高度
    imageLoad(){
      this.themeTopYs = [];
      this.themeTopYs.push(0);
      this.themeTopYs.push(this.$refs.params.$el.offsetTop - 44);
      this.themeTopYs.push(this.$refs.comment.$el.offsetTop - 44);
      this.themeTopYs.push(this.$refs.recommend.$el.offsetTop - 44);
      console.log(this.themeTopYs);
    },
    titleClick(index){
       console.log(index);
       this.$refs.scroll.scrollTo(0,-this.themeTopYs[index],200)
    },
    contentScroll(position){
      //1.获取y值
      // console.log(position);
      const positoinY = -position.y

      // 2.positoinY与主题中的值进行对比

      let length=this.themeTopYs.length
      for(let i =0;i<length;i++){
        if(this.currentIndex !==i && (( i < length - 1 ) && positoinY >= this.themeTopYs[i] && positoinY
        < this.themeTopYs[i+1] || (i === length - 1 && positoinY >= this.themeTopYs[i]))){
           this.currentIndex= i;
          //  console.log(this.currentIndex);
           this.$refs.nav.currentIndex = this.currentIndex
        }
      }

      //是否显示回到顶部
      this.isShowBackTop= - (position.y) >2000
    },
    backClick(){
      this.$refs.scroll.scrollTo(0,0)
     },
     addToCart(){
       //1.获取购物车需要展示的信息
       const product ={}
       product.image=this.topImages[0];
       product.title=this.goodsInfo.title;
       product.desc = this.goodsInfo.desc;
       product.price=this.goodsInfo.lowNowPrice;
       product.iid=this.iid;

       //2.将商品添加到购物车中
       this.$store.commit('addCart',product)

     }
  }
}
</script>

<style scoped>
#detail{
 position: relative;
 z-index: 9;
 background-color: #fff;
 height: 100vh;
}
.detail-nav{
  position: relative;
  z-index: 9;
  background-color: #fff;
}

.content{
  height: calc(100% - 44px - 53px);
}
</style>
